<html>
<head>
	<title>HTML5 Game Engine Testing</title>
	<script type="text/javascript" src="./js/net.js"></script>
	<script type="text/javascript" src="./js/debug.js"></script>
	<script type="text/javascript" src="./js/gui.js"></script>
	<script type="text/javascript" src="./js/cookie.js"></script>
	<script type="text/javascript" src="./js/jqueryui/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="./js/jqueryui/js/jquery-ui-1.10.1.custom.min.js"></script>
<!--	<script type="text/javascript" src="./js/jcanvas.min.js"></script>-->
	<link rel="stylesheet" type="text/css" href="./js/jqueryui/css/ui-lightness/jquery-ui-1.10.1.custom.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/debug.css" />
	<link rel="stylesheet" type="text/css" href="./css/canvas.css" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
window.addEventListener('load', function(){

	// Websockets fix
	$(window).keydown(function(event) {
		// check for escape key
		if (event.which == 27) {
			// the following seems to fix the symptom but only in case the document has the focus
			event.preventDefault();
		}
	});

	loginDialog = $('#login-dialog').dialog({
		autoOpen: false,
		buttons: {
			"OK": function(){
				if($(this).children('#remember').is(':checked'))
				{
					Cookie.set('login', $(this).children('#login').val(), 7);
					Cookie.set('password', $(this).children('#password').val(), 7);
				}
				$(this).dialog('close');
				client.send({a:'auth',login:$(this).children('#login').val(),password:$(this).children('#password').val()});
			}
		},
		open: function(){
			$(this).keypress(function(e){
				if(e.keyCode == 13)
				{
					$(this).parent().find('.ui-dialog-buttonpane button:first').click();
				}
			});
			$(this).parent().find('.ui-dialog-titlebar-close').hide();
		},
		closeOnEscape: false,
		draggable: false,
		resizable: false,
		modal: true,
		title: 'Authentication'
	});

	function jalert(content)
	{
		$('#alert').children('#content').html(content);
		$('#alert').dialog({
			modal:true,
			buttons: {
				"OK": function(){
					$(this).dialog('close');
				}
			}
		});
	}

	client = new Net.Client(true);
	client
//	.setHostPort('anderson.info.tm', 31337)
//	.setHostPort('192.168.20.85', 31337)
//	.setHostPort('127.0.0.1', 31337)
//	.setHostPort('192.168.1.3', 31337)
	.setHostPort(document.domain, 31337)
	.onOpen(function(client){
		debug.add('Connected!');
	})
	.onClose(function(client){
		debug.error('Disconnected.')
	})
	.onMessage(function(client, packet){
/*		if(packet.a == 'message')
		{
			debug.add('<b>'+packet.sender+'</b>'+': '+packet.message);
		}
		else */if(packet.a == 'auth-required')
		{
//			debug.add('Authentication required.');
//			$('#login-dialog').dialog('open');
			var login = Cookie.get('login');
			var password = Cookie.get('password');
			if(login && password)
			{
				client.send({a:'auth',login:login,password:password});
			}
			else
			{
				$('#login-dialog').dialog('open');
			}
		}
		else if(packet.a == 'connected')
		{
			var ip = packet.sender.split('.');
			debug.add('User connected from '+ip[0]+'.'+ip[1]+'.*.*');
		}
/*		else if(packet.a == 'auth')
		{
			if(packet.success)
			{
				jalert('Authorization successful!');
				engine.setPlayerNodeId(packet.nodeId);
				engine.setPlayerPos(packet.at);
			}
			else
			{
				jalert('Authorization failed.');
			}
		}*/
		else// if(packet.a != 'pingok')
		{
			engine.dispatchPacket(packet);
			if(packet.a == 'message')
			{
				debug.add('<b>'+packet.sender+'</b>'+': '+packet.message);
			}
//			debug.add('Received packet `'+JSON.stringify(packet)+'`');
		}
	})
	.onWrite(function(client){
		pinger.reset();
	})
	.connect();

	pinger = new Net.Pinger(client, 3000);
	reconnector = new Net.Reconnector(client, 1000);
	engine = new GUI.Engine('canvas');
	engine.onAuthFail = function()
	{
		$('#login-dialog').dialog('open');
	};
});
</script>

<div id="page-wrap">
	<div id="canvas-wrap">
		<div id="dev">
		</div>
		<canvas name="canvas" id="canvas" width="800" height="480" tabindex="0">
			Your canvas doesn't support canvas!<br />
			Please download latest Firefox or Chrome.
		</canvas>
	</div>

	<div id="message-box">
	<input type="text" name="message" id="message" onKeyPress="if(event.keyCode == 13) { client.send({'a':'message','message':this.value}); this.value = ''; }">
	</div>

	<div id="debug">
	</div>
</div>


<div id="login-dialog">
Login:<br /><input type="text" id="login" value="" /><br />
Password:<br /><input type="password" id="password" value="" /><br />
<input type="checkbox" name="remember" id="remember" checked="checked" /><label for="remember">Remember me</label>
<a href="./register.php">Not registered?</a>
</div>

<div id="alert" title="Message">
	<div id="content"></div>
</div>

</html>
